<script lang="ts">
  import { defineComponent, toRefs, ref, unref } from 'vue'
  import { createAppProviderContext } from './useAppContext'
  import { createBreakpointListen } from '/@/hooks/event/useBreakpoint'
  import { prefixCls } from '/@/settings/designSetting'
  import { useAppStore } from '/@/store/modules/app'
  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum'

  const props = {
    /**
     * class style prefix
     */
    prefixCls: { type: String, default: prefixCls },
  }

  export default defineComponent({
    name: 'AppProvider',
    inheritAttrs: false,
    props,
    setup(props, { slots }) {
      const isMobile = ref(false)
      const isSetState = ref(false)

      const appStore = useAppStore()

      // Monitor screen breakpoint information changes
      createBreakpointListen(({ screenMap, sizeEnum, width }) => {
        const lgWidth = screenMap.get(sizeEnum.LG)
        if (lgWidth) {
          isMobile.value = width.value - 1 < lgWidth
        }
        handleRestoreState()
      })

      const { prefixCls } = toRefs(props)

      // Inject variables into the global
      createAppProviderContext({ prefixCls, isMobile })

      /**
       * Used to maintain the state before the window changes
       */
      function handleRestoreState() {
        if (unref(isMobile)) {
          if (!unref(isSetState)) {
            isSetState.value = true
            const {
              menuSetting: {
                type: menuType,
                mode: menuMode,
                collapsed: menuCollapsed,
                split: menuSplit,
              },
            } = appStore.getProjectConfig
            appStore.setProjectConfig({
              menuSetting: {
                type: MenuTypeEnum.SIDEBAR,
                mode: MenuModeEnum.INLINE,
                split: false,
              },
            })
            appStore.setBeforeMiniInfo({ menuMode, menuCollapsed, menuType, menuSplit })
          }
        } else {
          if (unref(isSetState)) {
            isSetState.value = false
            const { menuMode, menuCollapsed, menuType, menuSplit } = appStore.getBeforeMiniInfo
            appStore.setProjectConfig({
              menuSetting: {
                type: menuType,
                mode: menuMode,
                collapsed: menuCollapsed,
                split: menuSplit,
              },
            })
          }
        }
      }
      return () => slots.default?.()
    },
  })
</script>
